<template>
  <view class="myTeam">
    <view class="uChartsBox">
      <view class="">
        <chart :customStyle="{margin: '0 auto'}" chartType="ring" :opts="sexRingOption" style="margin: auto;" ref="ringChart" canvasId="u-sexring-canvas"></chart>
      </view>
    </view>
    <view class="clientBox">
      <view class="clientList">
        <view class="clientItem">
          <view class="clientItem-l">
            <view class="clientItem-l-l">
              <view class="clientItem-l-l-img">
                <image style="width: 64rpx; height: 64rpx;" :src="bigBoss" mode=""></image>
              </view>
            </view>
            <view class="clientItem-l-r">
              <view class="clientItem-l-r-t">
                <text class="name">大掌柜</text>
              </view>
              <view class="clientItem-l-r-b">
                {{clientFrom.teamTotalV4Num}}人
              </view>
            </view>
          </view>
          <view class="clientItem-r">
            <view class="clientItem-r-txt">
              <text class="team">{{clientFrom.teamTotalV4Ratio}}%</text>
            </view>
          </view>
        </view>
				
        <view class="clientItem">
          <view class="clientItem-l">
            <view class="clientItem-l-l">
              <view class="clientItem-l-l-img">
                <image style="width: 64rpx; height: 64rpx;" :src="partner" mode=""></image>
              </view>
            </view>
            <view class="clientItem-l-r">
              <view class="clientItem-l-r-t">
                <text class="name">合伙人商户</text>
              </view>
              <view class="clientItem-l-r-b">
                {{clientFrom.teamTotalV3Num}}人
              </view>
            </view>
          </view>
          <view class="clientItem-r">
            <view class="clientItem-r-txt">
              <text class="team">{{clientFrom.teamTotalV3Ratio}}%</text>
            </view>
          </view>
        </view>
        
        <view class="clientItem">
          <view class="clientItem-l">
            <view class="clientItem-l-l">
              <view class="clientItem-l-l-img">
                <image style="width: 64rpx; height: 64rpx;" :src="business" mode=""></image>
              </view>
            </view>
            <view class="clientItem-l-r">
              <view class="clientItem-l-r-t">
                <text class="name">商户</text>
              </view>
              <view class="clientItem-l-r-b">
                {{clientFrom.teamTotalV2Num}}人
              </view>
            </view>
          </view>
          <view class="clientItem-r">
            <view class="clientItem-r-txt">
              <text class="team">{{clientFrom.teamTotalV2Ratio}}%</text>
            </view>
          </view>
        </view>
        
        <view class="clientItem">
          <view class="clientItem-l">
            <view class="clientItem-l-l">
              <view class="clientItem-l-l-img">
                <image style="width: 64rpx; height: 64rpx;" :src="intelligent" mode=""></image>
              </view>
            </view>
            <view class="clientItem-l-r">
              <view class="clientItem-l-r-t">
                <text class="name">达人</text>
              </view>
              <view class="clientItem-l-r-b">
                {{clientFrom.teamTotalV1Num}}人
              </view>
            </view>
          </view>
          <view class="clientItem-r">
            <view class="clientItem-r-txt">
              <text class="team">{{clientFrom.teamTotalV1Ratio}}%</text>
            </view>
          </view>
        </view>
        
        <view class="clientItem">
          <view class="clientItem-l">
            <view class="clientItem-l-l">
              <view class="clientItem-l-l-img">
                <image style="width: 64rpx; height: 64rpx;" :src="member" mode=""></image>
              </view>
            </view>
            <view class="clientItem-l-r">
              <view class="clientItem-l-r-t">
                <text class="name">普通会员</text>
              </view>
              <view class="clientItem-l-r-b">
                {{clientFrom.teamTotalV0Num}}人
              </view>
            </view>
          </view>
          <view class="clientItem-r">
            <view class="clientItem-r-txt">
              <text class="team">{{clientFrom.teamTotalV0Ratio}}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import chart from '../../components/u-charts/component.vue';
import { teamByRank } from "../../service/clientManage/clientManage.service.js"
export default {
  components: {
    chart
  },
  data () {
    return {
      clientFrom: {
        teamTotalV4Num: '', // 大掌柜人数
        teamTotalV4Ratio: '', // 大掌柜所占比例
        teamTotalV3Num: '', //合伙人
        teamTotalV3Ratio: '', //合伙人
        teamTotalV1Num: '',
        teamTotalV1Ratio: '',
        teamTotalV0Num: '',
        teamTotalV0Ratio: ''
      },
      searchUserId:'',
      bigBoss: this.$store.state.imgBaseUrl + '/myTeam/bigBoss.png',
      partner: this.$store.state.imgBaseUrl + '/myTeam/partner.png',
      business: this.$store.state.imgBaseUrl + '/myTeam/business.png',
      intelligent: this.$store.state.imgBaseUrl + '/myTeam/intelligent.png',
      member: this.$store.state.imgBaseUrl + '/myTeam/member.png',
      uWidth:350,
      uHeight:350,
      sexRingOption: {
        dataLabel:true, // 是否在图表中显示数据标签内容值
        background:'#3F4572', // 图标背景颜色
        ringWidth:20, // 设置圆环大小
        legend:{
          show:true, // 是否显示图例
          fontColor:'#FFFFFF',
          lineHeight:'15'
        },
        // title: {
        //   name:'',
        //   color: '#FFFFFF',
        //   fontSize: 20,
        //   offsetY:-5,
        //   offsetX:5,
        // },
        subtitle: {
          name: '我的团队',
          color: '#E1E1E1',
          fontSize: 18,
          offsetY:5,
          offsetX:2,
        },
        "series": []
      },
    }
  },
  created () {
    this.teamByRanks();
  },
  onLoad (option) {
    this.searchUserId = option.searchUserId
  },
  methods: {
    async teamByRanks () {
      this.clientFrom = await teamByRank({id:this.searchUserId});
      this.sexRingOption.series = [
        {
          "name": "大掌柜",
          "data": this.clientFrom.teamTotalV4Ratio,
        },
        {
          "name": "合伙人商户",
          "data": this.clientFrom.teamTotalV3Ratio,
        },
        {
          "name": "商户",
          "data": this.clientFrom.teamTotalV2Ratio,
        },
        {
          "name": "达人",
          "data": this.clientFrom.teamTotalV1Ratio,
        },
        {
          "name": "普通会员",
          "data": this.clientFrom.teamTotalV0Ratio,
        }
      ];
      this.$refs['ringChart'].changeData('u-sexring-canvas', this.sexRingOption);
    }
  }
}
</script>

<style scoped lang="scss">
  .myTeam {
    padding-bottom: 100rpx;
    background-color: #32355B;
    min-height: calc(100vh - 50px);
    .clientBox {
      .clientList {
        margin-top: 43rpx;
        padding: 0 35rpx;
        .clientItem {
          background-color: #3F4572;
          height: 118rpx;
          border-radius:13rpx;
          margin-top: 20rpx;
          padding: 0 13rpx 0 22rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .clientItem-l {
            .clientItem-l-l {
              display: inline-block;
							vertical-align: middle;
              .clientItem-l-l-img {
                width: 64rpx;
                height: 64rpx;
              }
            }
            .clientItem-l-r {
              display: inline-block;
              margin-left: 20rpx;
							vertical-align: middle;
              .clientItem-l-r-t {
                .name {
                  color: #FFFFFF;
                  font-weight:bold;
                  font-size: 30rpx;
                }
                .authentication {
                  color: #FFA173;
                  font-size: 22rpx;
                  margin-left: 30rpx;
                }
              }
              .clientItem-l-r-b {
                font-size:22rpx;
                color:rgba(255,255,255,1);
                // margin-top: 15rpx;
              }
            }
          }
          .clientItem-r {
            font-size: 24rpx;
            color: #FFFFFF;
            .team {
              margin-left: 34rpx;
            }
          }
        }
      }
    }
  }
</style>
